
import React, { memo, useEffect, useState } from "react";
import { reqHighquality, } from "../../../../api/find";
import { formatNum } from '@/utils'
import style from './sty.module.css'
import { Link } from 'react-router-dom'
const Recommend = () => {



  const [highQuality, setHighWuality] = useState([]);
  useEffect(() => {
    reqHighquality().then(res => {
      setHighWuality(res.playlists || [])
    })
  }, [])

  return <div className={style.root}>
    <div onClick={() => this.props.history.push('/playlists')}>精品歌单 <span className={'iconfont icon-iconfontjiantou5'} style={{ fontSize: 12 }} /></div>
    <ul className={style.list}>
      {highQuality && highQuality.map(sheet => <li key={sheet.id}>
        <Link to={`/sheet/${sheet.id}`} className={style['sheet-box']}>
          <img src={sheet.coverImgUrl} alt="" />
          <div>{sheet.name}</div>
          <p className={style.playCount}><span className={'iconfont icon-erji1'} style={{ fontSize: 12 }} /> {formatNum(sheet.playCount)}</p>
        </Link>
      </li>)}
    </ul>
  </div>

}
export default memo(Recommend)